<template>
  <div id="app">
    <div style="width: 500px; margin: 10px auto;">
      表达式名称: <el-input v-model="cronName"></el-input>
      表达式: <el-input v-model="cronExp"></el-input>
    </div>
    <el-button @click="cronDialogVisible=true">编辑cron表达式</el-button>
    
    <el-dialog 
      class="cron-dialog"
      title="cron表达式" 
      width="940px"
      :visible.sync="cronDialogVisible">
      <cron 
          v-model="cronExp" 
          :cronName.sync="cronName"
      ></cron>      
    </el-dialog>
  </div>
</template>

<script>
  import Cron from './components/cron/'

export default {
  name: 'App',
  components: {
    Cron
  },
  data() {
    return {
      cronExp: "0 5 * * * ? *",
      cronName: '每5分钟一次',
      cronDialogVisible: false
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.cron-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #ccc;
  }
  .el-dialog__body {
    padding-top: 15px;
  }  
}
</style>
